<script>
import { request } from '@/utils'
import { Plus } from '@element-plus/icons-vue'

export default {
  data() {
    return {
      users: [{
        id: 100,
        username: '秦皇汉武',
        password: '1688888',
        money: 10000.0,
      },{
        id: 100,
        username: '秦皇汉武',
        password: '1688888',
        money: 10000.0,
      },{
        id: 100,
        username: '秦皇汉武',
        password: '1688888',
        money: 10000.0,
      }],
      url: '',
      /* 验证规则 */
      rules: {
        /* 要验证的表单字段 */
        username: [
          /* 用户名，trigger表示触发规则 */
          { required: true, message: '必须填写用户名', trigger: 'blur' },
          { min: 5, max: 10, message: '长度在5-10之间', trigger: 'blur' },
        ],
        password: [
          /* trigger-blur表示失去焦点，change表示改变就出发规则 */
          { required: true, message: '必须填写密码', trigger: 'change' },
        ],
      },
      user: {
        id: 100,
        username: '秦皇汉武',
        password: '1688888',
        money: 10000.0,
      },
      imageUrl: null,
    }
  },
  methods: {
    getUsers() {
      request
        .get('http://localhost:8088/api/tt2?pageNum=2', {}, { noNeedToken: true })
        .then((data) => {
          console.log(data)
          this.users = data.data.records
        })
    },
    // 这里的response使用的是ElementPlus自带的，不是http/request里封装的
    uploadSuccess(response, uploadFile, uploadFiles) {
      console.log('上传成功！', response, uploadFile)
      // response就是后端返回的数据
      this.url = 'http://localhost:8088' + response.data
    },
    uploadError(error) {
      console.log('上传失败', error)
    },
    submitUpload1() {
      // this.$refs就是Vue中获取所有的ref引用组件
      this.$refs.uploadRef.submit()
    },
    submit() { },
    reset() { },
    add() {
      // 这里可以放代码！！！
      // const counter = useCounterStore() // 创建
      // counter.increment() // 使用方法
    },
  },
}
</script>

<template>
  <AppPage :show-footer="true">
    <div>
      <el-button type="primary" @click="getUsers">
        <TheIcon icon="cryptocurrency-color:1inch" :size="16" class="mr-4" />点击获取用户列表
      </el-button>
      
      <el-divider />

      <div>
        <el-table :data="users">
          <el-table-column label="ID" prop="id"/>
          <el-table-column label="Name" prop="username"/>
          <el-table-column label="Pass" prop="password"/>
          <el-table-column label="Money" prop="money"/>
        </el-table>
      </div>

      <el-divider />

      <el-button icon="Plus">ABC</el-button>

      <el-divider />

      <el-upload class="avatar-uploader" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
        :show-file-list="false">
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon">
          <Plus />
        </el-icon>
      </el-upload>

      <el-divider />

      <h3>欢迎光临本商城-竭诚为您服务</h3>
      <el-button @click="add">添加到购物车</el-button>
      <el-divider></el-divider>
      <!-- :rules绑定表单验证的规则，:model和prop是配合检验 -->
      <el-form :model="user" label-width="100px" :rules="rules">
        <el-form-item label="用户名：" prop="username">
          <el-input v-model="user.username" />
        </el-form-item>
        <el-form-item label="密码：" prop="password">
          <el-input type="password" v-model="user.password" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit">登录</el-button>
          <el-button type="warning" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>

      <el-divider />

      <div>
        <el-upload action="http://localhost:8088/api/upload" ref="uploadRef" name="image" :auto-upload="false">
          <template #trigger>
            <el-button type="primary">选择文件</el-button>
          </template>
          <el-button class="ml-3" type="success" @click="submitUpload1">点击上传</el-button>
          <template #tip>
            <div class="el-upload__tip">jpg/png必须小于500kb</div>
          </template>
        </el-upload>
      </div>
      <el-divider />
      <div>
        <!-- 上传的配置：:on-success虽然是属性，但是需要配置一个方法，表示上传成功，:on-error表示失败！ -->
        <el-upload action="http://localhost:8088/api/upload" name="image" :on-success="uploadSuccess"
          :on-error="uploadError">
          <template #trigger>
            <el-button type="primary">选择文件</el-button>
          </template>
          <template #tip>
            <div class="el-upload__tip">jpg/png必须小于500kb</div>
          </template>
        </el-upload>
        <el-divider></el-divider>
        <div>
          <img :src="url" width="200" />
        </div>
      </div>
      <div>
        <el-upload class="upload-demo" drag action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" multiple>
          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
          <div class="el-upload__text">
            Drop file here or <em>click to upload</em>
          </div>
          <template #tip>
            <div class="el-upload__tip">
              jpg/png files with a size less than 500kb
            </div>
          </template>
        </el-upload>
      </div>
    </div>
  </AppPage>
</template>

<!-- 上传样式效果 -->
<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
